<template>
  <header>
    <nav class="nav cf">
      <router-link to="/articles">
        <div class="nav-logo">
          <span class="name">Test blog</span>
        </div>
      </router-link>
      <ul class="nav-list">
        <li><router-link to="/articles" active-class="active" class="hover-underline">文章</router-link></li>
        <li><router-link to="/tags" active-class="active" class="hover-underline">标签</router-link></li>
        <li><router-link to="/archives" active-class="active" class="hover-underline">归档</router-link></li>
        <li><router-link to="/about" active-class="active" class="hover-underline">关于我</router-link></li>
      </ul>
      <a href="javascript:;" id="pull" @click.stop="showNavAside = !showNavAside"><i class="iconfont icon-icon"></i></a>
    </nav>
    <div class="nav-aside" :class="{'nav-aside-show': showNavAside}" @click="closeNavAside($event)">
      <ul>
        <li><router-link to="/articles" active-class="active">文章</router-link></li>
        <li><router-link to="/tags" active-class="active">标签</router-link></li>
        <li><router-link to="/archives" active-class="active">归档</router-link></li>
        <li><router-link to="/about" active-class="active">关于我</router-link></li>
      </ul>
    </div>
  </header>
</template>

<script>
export default {
  data(){
    return {
      sign: [
      '外表平静如水，内心坚定如山。', 
      '在某个时刻，你不得不意识到，有的人可以留在你的心里，却不会出现在你的生活中了', 
      '​​​​小时候，幸福是件很简单的事；长大后，简单是件很幸福的事。'
      ],
      showNavAside: false
    }
  },
  methods: {
    //点击隐藏
    closeNavAside(e){
      if(e.target.localName === 'a'){
        this.showNavAside = false;
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/stylus/_setting.styl';
//使其脱离文档流，所以用了absolute
header
  position: absolute
  top: 0
  left: 0
  right: 0
  background-color: #fff
  box-shadow: 0 0 4px rgba(0,0,0,.25)
  .nav
    max-width: 1000px
    margin: 0 auto
    .nav-logo
      height: 60px
      float: left
      span
        display: block
      span.name
        height: 60px
        font-size: 31px
        line-height: 60px
        padding-left: 6px
        font-family: 'Dancing in the Rainbow'
      span.sign
        font-size: 20px
    .nav-list
      float: right
      font-size: 0
      li
        display: inline-block
        font-size: 16px
        height: 60px
        line-height: 60px
        font-weight: 700
        margin: 0 5px 
        font-size: 20px
        a.active::before 
          background-color: $green
          transform: scaleX(1)
     a#pull
       display: none
  .nav-aside
    display: none
    position: absolute
    background-color: #f9f9f9
    right: 0
    top: 60px
    z-index: 999
    box-shadow: 0 0 4px rgba(0,0,0,.25)
    ul 
      li
        font-size: 25px
        a 
         display: block
   .nav-aside-show 
    display: block
//签名和名字居中，同时3个小点显示出来
@media screen and (max-width: 480px)
  header
      .nav
        position: relative
        text-align: center
        .nav-list
          display: none
          float: none
        a#pull
          position: absolute
          top: 50%
          right: 0
          transform: translateY(-50%) rotate(90deg)
          display: block
          width: 50px
          height: 30px
          line-height: 30px
          i.icon-icon
            font-size: 25px
//签名显示
@media screen and (max-width: 320px)
  header
      .nav
        .nav-logo
          float: none
          display: inline-block
</style>